<!-- 放置html代码， template里面的放置的元素有一个根标签-->
<template>
  <!-- 定义的卡片组件 -->
  <el-card>
    <div slot="header">
      <!-- 面包屑组件 -->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>馆藏类别管理</el-breadcrumb-item>
        <el-breadcrumb-item>类别信息管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <!-- 布局组件 -->
    <el-row :gutter="20">
      <el-col :span="6">
        <el-input v-model="bname" clearable @clear="findPager" placeholder="请输入借阅图书名称查询"></el-input>
      </el-col>
      <el-col :span="6">
        <el-button type="primary" @click="findPager" icon="el-icon-search">查询</el-button>
        <el-button type="danger" @click="addDialog" icon="el-icon-plus">借阅</el-button>
      </el-col>
    </el-row>
    <!-- 定义表格组件  表格组件中的“:data”属性是绑定数据的，数据是一个数组-->
    <el-table :data="tableData">
      <!-- 定义个表格单元格 -->
      <el-table-column prop="sname" label="借阅人"></el-table-column>
      <el-table-column prop="bname" label="图书名称"></el-table-column>
      <el-table-column prop="otime" label="借出时间"></el-table-column>
      <el-table-column prop="itime" label="归还时间"></el-table-column>
      <el-table-column prop="quantity" label="数量"></el-table-column>
      <el-table-column prop="stat" label="状态">
        <template slot-scope="scope">
          <el-tag type="danger" v-show="scope.row.stat==0">已借出</el-tag>
          <el-tag type="success" v-show="scope.row.stat==1">已归还</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button v-show="scope.row.stat==0" @click="bgBook(scope.row)" type="success">
            归还
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pager.page"
      :page-sizes="[5, 15, 20, 25]" :page-size="pager.limit" layout="total, sizes, prev, pager, next, jumper"
      :total="pager.total">
    </el-pagination>
    <!-- 定义添加对话框 -->
    <el-dialog title="添加借阅信息" :visible.sync="addDialogFlag">
      <!-- 定义的表单 -->
      <el-form :model="borrow" :rules="rules" ref="borrow">
        <!-- 定义表单项 -->
        <el-form-item  >
          <el-select clearable v-model="borrow.bid" placeholder="请选择借阅图书名称">
            <el-option v-for="item in options" :label="item.bname" :value="item.bid">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="quantity">
          <el-input v-model="borrow.quantity" placeholder="借阅图书数量"></el-input>
        </el-form-item>
        <!-- 定义表单项 -->
        <el-form-item  >
          <el-select clearable v-model="borrow.sid" placeholder="请输入借阅人">
            <el-option v-for="item in students" :label="item.sname" :value="item.sid">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addDialogFlag = false">取 消</el-button>
        <el-button type="primary" @click="save">保存</el-button>
      </div>
    </el-dialog>

  </el-card>
</template>
<!-- 行为区，放置js代码，包含请求后端的ajax代码 -->
<script>
  export default {
    data() { //定义属性区
      return {
        rules: { //定义添加表单验证规则
          quantity: [{
            required: true,
            message: '请输入图书数量',
            trigger: 'blur'
          }]

        },
        addDialogFlag: false, //定义显示添加对话框标记，默认是不显示
        tableData: [], //定义表格的数组，初始化表格数据
        pager: { //封装分页对象
          page: 1, //分页起始数据
          limit: 5, //每页显示最大条数
          total: 0 //统计记录数
        },
        borrow: {
          boid: 0,
          sid: '',
          bid: '',
          bname: '',
          quantity: '',
          stat: ''
        },
        bname: '', //根据借阅图书名称进行条件查询
        options: [], //初始化图书下拉列表
        students: [], //借阅人就是注册学生所有信息

      }
    },
    methods: { //用户自定方法区
      bgBook(row) {
        this.borrow = row; //将归还的选中数据row赋值给borrow对象即可
        this.$http.post('http://114.55.238.138:9000/api/borrow/backBook', this.borrow)
          .then(res => {
            if (res.data.code == 200) {
              this.$message({
                message: res.data.message,
                type: 'success'
              });
              this.findPager(); //再次调用查询
            }
          }).catch(err => {
            this.$message.error('错了哦，网络异常');
          })

      },
      save() {
        this.$refs['borrow'].validate(valid => {
          if (valid) {
            this.$http.post('http://114.55.238.138:9000/api/borrow/borrowBook', this.borrow).then(res => {
              if (res.data.code == 200) {
                this.$message({
                  message: res.data.message,
                  type: 'success'
                });
                this.addDialogFlag = !this.addDialogFlag; //关闭添加对话框
                this.findPager(); //在此调用查询
              }
            }).catch(err => {
              this.$message.error('错了哦，网络异常');
            })
          }
        })

      },

      addDialog() { //点击该方法是打开添加对话框，并不是添加
        this.addDialogFlag = !this.addDialogFlag;
      },

      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.pager.limit = val;
        this.findPager();
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.pager.page = val;
        this.findPager()
      },

      findAll() { //查询所有馆藏图书信息
        this.$http.get('http://114.55.238.138:9000/api/book/findAll')
          .then(res => {
            this.options = res.data.data;
          })
      },
      findStudents() { //查询所有借阅人信息
        this.$http.get('http://114.55.238.138:9000/api/student/findAll')
          .then(res => {
            this.students = res.data.data;
          })
      },
      findPager() {
        this.$http.get('http://114.55.238.138:9000/api/borrow/findPager', {
          params: {
            page: this.pager.page,
            limit: this.pager.limit,
            bname: this.bname
          }
        }).then(res => {
          console.info(res);
          this.tableData = res.data.data.data; //数据
          this.pager.total = res.data.data.count; //统计记录数
        }).catch(err => {
          this.$message.error('错了哦，网络异常');
        })

      }
    },

    created() { //vue技术的生命周期函数，浏览器在加载当前页面时自动渲染里面的代码
      this.findPager();
      this.findAll();
      this.findStudents()
    }

  }
</script>


<!-- 样式区，放置css样式 -->
<style scoped>
  .el-pagination {
    margin-top: 10px;
  }

  .el-breadcrumb {
    margin-bottom: 20px;
  }
</style>
